<template>
  <div class="bottom-nav">
    <div class="nav-item nav-item-left">
      <div>
        <i class="nav-item-icon nav-item-service"></i>
        <span class="nav-item-text">客服</span>
      </div>
      <div>
        <i class="nav-item-icon nav-item-shop"></i>
        <span class="nav-item-text">店铺</span>
      </div>
      <div>
        <i class="nav-item-icon nav-item-collect"></i>
        <span class="nav-item-text">收藏</span>
      </div>
    </div>
    <div class="nav-item nav-item-right">
      <div class="addCart" @click="addToCart">加入购物车</div>
      <div class="buy">购买</div>
    </div>
  </div>
</template>

<script>
export default {
  name: "DetailBottomNav",
  methods:{
    addToCart(){
      this.$emit('addToCart');
    }
  }
}
</script>

<style scoped>
.bottom-nav {
  height: 49px;
  background-color: #fff;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /*position: relative;
  z-index: 9;*/
  display: flex;
  text-align: center;
  overflow: hidden;
}

.nav-item {
  flex: 1;
  display: flex;
}

.nav-item > div {
  flex: 1;
}

.nav-item-left .nav-item-text {
  font-size: 13px;
}

.nav-item-left .nav-item-icon {
  display: block;
  width: 22px;
  height: 20px;
  margin: 6px auto 3px;
  background: url("~@/assets/img/detail/detail_bottom.png") 0 0/100%;
}

.nav-item-left .nav-item-service {
  background-position: 0 -54px;
}

.nav-item-left .nav-item-shop {
  background-position: 0 -98px;
}

.nav-item-right {
  font-size:  15px;
  color: #fff;
  line-height: 52px;
}

.nav-item-right .addCart {
  background-color: #ffe817;
  color: #333;
}

.nav-item-right .buy {
  background-color: #f69;
}
</style>
